<template>
  <!-- 提示框  信息不完整 -->
  <div class="q-pa-md q-gutter-sm">
    <q-dialog
      v-model="box.isErrRow"
      persistent
      transition-show="scale"
      transition-hide="scale"
    >
      <q-card class="bg-teal text-white" style="width: 300px">
        <q-card-section>
          <div class="text-h6">提示</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          {{box.errRowData}}
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>

  <!-- 提示框  内容错误-->
  <q-dialog v-model="box.boxDialog" position="top">
    <q-card class="bg-pink text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">提示</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        请确认格式是否输入正确.
      </q-card-section>
      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8 text-grey">例如:（木箱） 300*280*290</div>
          <div class="text-grey">例如:（托盘） 300*290</div>
          <div class="text-grey">可以开启或关闭智能提示</div>
          <div class="text-grey">
            开启智能提示时,输入数量后会自动关闭当前提示框.
          </div>
        </div>
        <q-btn
          flat
          color="primary"
          @click="!box.isDialog"
          label="OK"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <div class="column" style="height: 100%">
    <div style="height: 15px"></div>
    <!-- 表头部分 -->
    <div class="col-1">
      <!-- 智能实时库存 卡片     <q-scroll-area style="height: 200px; max-width: 300px;">    -->
      <div class="q-gutter-md row justify-around">
        <q-scroll-area
          class="my-card justify-around"
          v-show="box.isHeader"
          style="position: absolute; z-index: 50"
        >
          <q-card class="q-lg-lg row q-col-gutter-md">
            <div
              class="col-lg-4 col-md-3 col-sm-4 col-xs-4"
              v-for="data in box.cards_data"
            >
              <q-card :style="box.cardBackground" class="text-white">
                <q-card-section class="text-h8 text-center">{{
                  data.title
                }}</q-card-section>
              </q-card>
            </div>
          </q-card>
        </q-scroll-area>
      </div>
      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <!-- 输入框部分 -->
        <div class="q-gutter-md row justify-around">
          <div class="col-0" v-show="!box.isSure"   >  </div>
            <q-chip v-show="box.isSure" dense size="lg"  color="blue-grey-10" text-color="white" >已审核 </q-chip>
          <q-input
            v-model.trim="box.yesExport"
            type="text"
            hint="内销/外销"
            @blur.native.capture="yesExportIsNorm()"
          >
            <template v-slot:append>
              <q-icon
                :name="
                  box.yesExport == '外销' ? 'directions_boat' : 'local_shipping'
                "
                size="80%"
              />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.customerPurchaseOrderId"
            type="text"
            hint="自定义订单号"
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%" />
            </template>
          </q-input>
          <q-input v-model.trim="box.supplierName" type="text" hint="供应商">
            <template v-slot:append>
              <q-icon name="person" size="80%" />
            </template>
          </q-input>
          <q-input
            v-model.trim="box.purchaseOrderId"
            type="text"
            hint="系统订单号"
            disable
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%" />
            </template>
          </q-input>
          <q-input v-model="box.planDate" type="date" hint="计划交期" />
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->
        <div style="height: 15px"></div>
        <div class="row q-gutter-md justify-around">
          <div class="q-gutter-md row items-start justify-around">
            <!-- <div   class=" q-gutter-md row justify-center ">
    <div class=" q-gutter-md  "> -->
            <q-btn-group>
              <q-btn
                icon="chevron_left"
                push
                ripple
                fab-max
                text-color="red-10"
              />
              <q-btn
                push
                label="提交"
                ripple
                fab-max
                text-color="red-10"
                @click="UIinsertPurchaseOrder"
              />
              <q-btn push label="新增" ripple text-color="teal-9" />
              <q-btn push label="审核" ripple fab-max text-color="purple-10" @click="isSureBut" />
              <q-btn push label="打印" ripple fab-max text-color="green-10" />
              <q-btn
                icon="chevron_right"
                push
                ripple
                fab-max
                text-color="red-10"
              />
            </q-btn-group>
          </div>

          <!-- 选择框 -->
          <div class="q-pa-md q-gutter-sm">
            <q-checkbox dense v-model="box.boxIsShow" label="BOX" color="red" />
            <q-checkbox
              dense
              v-model="box.SMRIsShow"
              label="SMR"
              color="teal"
            />
            <q-checkbox
              dense
              v-model="box.trayIsShow"
              label="TRAY"
              color="orange"
            />
          </div>
          <!-- 单选框 style=" color:#21BA45" -->
          <div class="q-pa-md q-gutter-sm text-weight-bold">
            <q-toggle
              v-model="box.isPrompts"
              checked-icon="check"
              unchecked-icon="clear"
              color="primary"
              label="开启智能提示"
            />
          </div>

        </div>

        <!-- 间距 -->
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="#542525" inset size="6px" />
      </q-card>
    </div>

    <!-- 表体部分 -->
    <div class="col-3">
      <!-- ---------------普通木箱------------------ -->
      <div v-show="box.boxIsShow">
        <!-- 树 -->
        <q-tree
          :nodes="boxCustomize"
          class="tree_font"
          node-key="label"
          default-expand-all
          accordion
          no-connectors
          color="red"
        >
          <template v-slot:header-generic="prop">
            <div class="table_width">
              <!-- 表格 -->
              <q-table
                :rows="box.boxRows"
                :columns="columnsInsert"
                virtual-scroll
                hide-pagination
                :rows-per-page-options="[0]"
              >
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <div class="title_font">{{ col.label }}</div>
                    </q-th>
                  </q-tr>
                </template>

                <!-- 表体部分 -->
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="id" :props="props">{{ props.row.id }}</q-td>
                    <q-td key="goodsName" :props="props">{{
                      props.row.goodsName
                    }}</q-td>
                    <!-- 产品材质 -->
                    <q-td key="goodsMaterial" :props="props">
                      {{ props.row.goodsMaterial }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsMaterial"
                        v-slot="scope"
                      >
                        <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                        <q-select
                          v-model="props.row.goodsMaterial"
                          :options="box.MaterialOptions"
                          :disable="box.isDisable"
                        ></q-select>
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsMaterial == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 产品规格 -->
                    <q-td key="goodsSize" :props="props">
                      {{ props.row.goodsSize }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsSize"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.goodsSize"
                          dense
                          autofocus
                          counter
                          :disable="box.isDisable"
                          @keyup.enter="scope.set"
                          @blur.native.capture="boxGoodsSizeIsNorm(props.row)"
                        />
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsSize == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 产品样式 -->
                    <q-td key="goodsStyle" :props="props">
                      {{ props.row.goodsStyle }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsStyle"
                        v-slot="scope"
                      >
                        <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                        <q-select
                          v-model="props.row.goodsStyle"
                          :options="box.boxOptions"
                          :disable="box.isDisable"
                        ></q-select>
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsStyle == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 订购数量 -->
                    <q-td key="purchaseOrderQuantity" :props="props">
                      {{ props.row.purchaseOrderQuantity }}
                      <q-popup-edit
                        v-model.number="props.row.purchaseOrderQuantity"
                        v-slot="scope"
                      >
                        <q-input
                          v-model.number="props.row.purchaseOrderQuantity"
                          dense
                          autofocus
                          counter
                          type="number"
                          :disable="box.isDisable"
                          @keyup.enter="scope.set"
                          @blur.native.capture="box.isHeader = false"
                        />
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.purchaseOrderQuantity == ''
                            ? Mycolor[6]
                            : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 适用产品 -->
                    <q-td key="forProductName" :props="props"
                      >{{ props.row.forProductName }}
                      <q-popup-edit
                        v-model="props.row.forProductName"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.forProductName"
                          dense
                          :disable="box.isDisable"
                          autofocus
                          counter
                        />
                      </q-popup-edit>
                    </q-td>
                    <!-- 备注信息 -->
                    <q-td key="customerMark" :props="props"
                      >{{ props.row.customerMark }}
                      <q-popup-edit
                        v-model="props.row.customerMark"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.customerMark"
                          dense
                          :disable="box.isDisable"
                          autofocus
                          counter
                        />
                      </q-popup-edit>
                    </q-td>
                    <!-- 操作 .trim-->
                    <q-td key="id" :props="props">
                      <q-btn
                        icon="delete"
                        :disable="box.isDisable"
                        @click.stop="boxRowDelete(props.row)"
                        dense
                        flat
                        push
                        class="but_float"
                      />
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
              <!-- 表格 -->
            </div>
          </template>
        </q-tree>
      </div>
      <!-- ------------------------------------- -->
      <!-- ---------------SMR木箱------------------ -->
      <div v-show="box.SMRIsShow">
        <!-- 树 -->
        <q-tree
          class="tree_font"
          :nodes="SMRCustomize"
          node-key="label"
          tick-strategy="none"
          accordion
          no-connectors
          color="teal"
        >
          <template v-slot:header-generic="prop">
            <div class="table_width">
              <!-- 表格 -->
              <q-table
                :rows="box.SMRRows"
                :columns="columnsInsert"
                virtual-scroll
                hide-pagination
                :rows-per-page-options="[0]"
              >
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <div class="title_font">{{ col.label }}</div>
                    </q-th>
                  </q-tr>
                </template>

                <!-- 表体部分 -->
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="id" :props="props">{{ props.row.id }}</q-td>


                    <q-td key="goodsName" :props="props">
                        {{ props.row.goodsName }}
                   </q-td>

                    <!-- 产品材质 -->
                    <q-td key="goodsMaterial" :props="props">
                      {{ props.row.goodsMaterial }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsMaterial"
                        v-slot="scope"
                      >
                        <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                        <q-select
                          v-model="props.row.goodsMaterial"
                          :options="box.MaterialOptions"
                          :disable="box.isDisable"
                        ></q-select>
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsMaterial == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>

                    <!-- 产品规格 -->
                    <q-td key="goodsSize" :props="props">
                      {{ props.row.goodsSize }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsSize"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.goodsSize"
                          dense
                          autofocus
                          counter
                          :disable="box.isDisable"
                          @keyup.enter="scope.set"
                          @blur.native.capture="SMRGoodsSizeIsNorm(props.row)"
                        />
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsSize == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 产品样式 -->
                    <q-td key="goodsStyle" :props="props">
                      {{ props.row.goodsStyle }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsStyle"
                        v-slot="scope"
                      >
                        <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                        <q-select
                        :disable="box.isDisable"
                          v-model="props.row.goodsStyle"
                          :options="box.SMROptions"
                        ></q-select>
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsStyle == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 订购数量 -->
                    <q-td key="purchaseOrderQuantity" :props="props">
                      {{ props.row.purchaseOrderQuantity }}
                      <q-popup-edit
                        v-model.number="props.row.purchaseOrderQuantity"
                        v-slot="scope"
                      >
                        <q-input
                          v-model.number="props.row.purchaseOrderQuantity"
                          dense
                          autofocus
                          counter
                          type="number"
                          :disable="box.isDisable"
                          @blur.native.capture="box.isHeader = false"
                        />
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.purchaseOrderQuantity == ''
                            ? Mycolor[6]
                            : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 适用产品 -->
                    <q-td key="forProductName" :props="props"
                      >{{ props.row.forProductName }}
                      <q-popup-edit
                        v-model="props.row.forProductName"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.forProductName"
                          dense
                          :disable="box.isDisable"
                          autofocus
                          counter
                        />
                      </q-popup-edit>
                    </q-td>
                    <!-- 备注信息 -->
                    <q-td key="customerMark" :props="props"
                      >{{ props.row.customerMark }}
                      <q-popup-edit
                        v-model="props.row.customerMark"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.customerMark"
                          dense
                          :disable="box.isDisable"
                          autofocus
                          counter
                        />
                      </q-popup-edit>
                    </q-td>
                    <!-- 操作 .trim-->
                    <q-td key="id" :props="props">
                      <q-btn
                        icon="delete"
                        :disable="box.isDisable"
                        @click.stop="SMRRowDelete(props.row)"
                        dense
                        flat
                        push
                        class="but_float"
                      />
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
              <!-- 表格 -->
            </div>
          </template>
        </q-tree>
      </div>
      <!-- ------------------------------------- -->
      <!-- ---------------托盘------------------ -->
      <div v-show="box.trayIsShow">
        <!-- 树 -->
        <q-tree
          class="tree_font"
          :nodes="trayCustomize"
          node-key="label"
          tick-strategy="none"
          accordion
          no-connectors
          color="orange"
          control-color="primary"
        >
          <template v-slot:header-generic="prop">
            <div class="table_width">
              <!-- 表格 -->
              <q-table
                :rows="box.trayRows"
                :columns="columnsInsert"
                virtual-scroll
                hide-pagination
                :rows-per-page-options="[0]"
              >
                <template v-slot:header="props">
                  <q-tr :props="props">
                    <q-th
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <div class="title_font">{{ col.label }}</div>
                    </q-th>
                  </q-tr>
                </template>

                <!-- 表体部分 -->
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="id" :props="props">{{ props.row.id }}</q-td>
                    <q-td key="goodsName" :props="props">{{
                      props.row.goodsName
                    }}</q-td>
                    <!-- 产品材质 -->
                    <q-td key="goodsMaterial" :props="props">
                      {{ props.row.goodsMaterial }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsMaterial"
                        v-slot="scope"
                      >
                        <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                        <q-select
                          v-model="props.row.goodsMaterial"
                          :options="box.MaterialOptions"
                          :disable="box.isDisable"
                        ></q-select>
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsMaterial == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 产品规格 -->
                    <q-td key="goodsSize" :props="props">
                      {{ props.row.goodsSize }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsSize"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.goodsSize"
                          dense
                          autofocus
                          counter
                          :disable="box.isDisable"
                          @keyup.enter="scope.set"
                          @blur.native.capture="trayGoodsSizeIsNorm(props.row)"
                        />
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsSize == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 产品样式 -->
                    <q-td key="goodsStyle" :props="props">
                      {{ props.row.goodsStyle }}
                      <q-popup-edit
                        v-model.trim="props.row.goodsStyle"
                        v-slot="scope"
                      >
                        <!-- <q-input v-model="props.row.goodsStyle" dense autofocus counter /> -->
                        <q-select
                        :disable="box.isDisable"
                          v-model="props.row.goodsStyle"
                          :options="box.trayOptions"
                        ></q-select>
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.goodsStyle == '' ? Mycolor[6] : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 订购数量 -->
                    <q-td key="purchaseOrderQuantity" :props="props">
                      {{ props.row.purchaseOrderQuantity }}
                      <q-popup-edit
                        v-model.number="props.row.purchaseOrderQuantity"
                        v-slot="scope"
                      >
                        <q-input
                          v-model.number="props.row.purchaseOrderQuantity"
                          dense
                          autofocus
                          counter
                          :disable="box.isDisable"
                          type="number"
                          @keyup.enter="scope.set"
                          @blur.native.capture="box.isHeader = false"
                        />
                      </q-popup-edit>
                      <q-badge
                        :color="
                          props.row.purchaseOrderQuantity == ''
                            ? Mycolor[6]
                            : Mycolor[6]
                        "
                      >
                      </q-badge>
                    </q-td>
                    <!-- 适用产品 -->
                    <q-td key="forProductName" :props="props"
                      >{{ props.row.forProductName }}
                      <q-popup-edit
                        v-model="props.row.forProductName"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.forProductName"
                          dense
                          autofocus
                          counter
                          :disable="box.isDisable"
                          @keyup.enter="scope.set"
                        />
                      </q-popup-edit>
                    </q-td>
                    <!-- 备注信息 -->
                    <q-td key="customerMark" :props="props"
                      >{{ props.row.customerMark }}
                      <q-popup-edit
                        v-model="props.row.customerMark"
                        v-slot="scope"
                      >
                        <q-input
                          v-model="props.row.customerMark"
                          dense
                          autofocus
                          counter
                          :disable="box.isDisable"
                          @keyup.enter="scope.set"
                        />
                      </q-popup-edit>
                    </q-td>
                    <!-- 操作 .trim-->
                    <q-td key="id" :props="props">
                      <q-btn
                        icon="delete"
                        @click.stop="trayRowDelete(props.row)"
                        dense
                        flat
                        :disable="box.isDisable"
                        push
                        class="but_float"
                      />
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
              <!-- 表格 -->
            </div>
          </template>
        </q-tree>
      </div>
      <!-- ------------------------------------- -->
    </div>

  </div>
</template>

<script>
import { reactive, ref, toRaw, onMounted } from "vue";
import {
  getStockReport,
  getPurchaseOrderIdList,
  getMaxpurchaseOrderId,
  insertPurchaseOrder,
} from "../../API/PurchaseOrder/insertPurchaseOrderAPI";
import { addAnyID } from "../../utils/goodsTools";
import { formatDate } from "../../utils/formatDate";
import { cards_data, columnsInsert } from "../../API/PurchaseOrder/purchaseOrderData";

export default {
  data() {
    //获取获取当前库存量
    onMounted(function () {
      box.cards_data.length = 0;
      aa();
      bb();
      cc();
      async function aa() {
        var res = await getStockReport();
        console.log(res.data);
        box.cards_data = res.data;
      }
      async function bb() {
        var res = await getPurchaseOrderIdList();
        console.log(res.data);
        box.purchaseOrderIdList = res.data;
      }
      async function cc() {
        var res = await getMaxpurchaseOrderId();
        if (res.data.length >0  ){
          box.purchaseOrderId = addAnyID(res.data[0].purchaseOrderId, "PO");
        }else {
          box.purchaseOrderId = addAnyID("PO20000000000", "PO");
        }
      }
    });
    function isSureBut(){
      box.isSure=!box.isSure
      if (box.isSure) {
       box.isDisable=true
      }else{
        box.isDisable=false
      }

    }
    //提交订单信息
    function UIinsertPurchaseOrder() {
      // 第一步 检查信息是否输入完整
      for (let index = 0; index < toRaw(box.boxRows).length; index++) {
        if (
          toRaw(box.boxRows)[index].goodsSize != "" ||
          toRaw(box.boxRows)[index].purchaseOrderQuantity != ""
        ) {
          if (
            toRaw(box.boxRows)[index].goodsSize == "" ||
            toRaw(box.boxRows)[index].goodsStyle == "" ||
            toRaw(box.boxRows)[index].purchaseOrderQuantity == ""
          ) {
            box.isErrRow = true;
            box.errRowData = `普通木箱表的  第${
              index + 1
            }行  信息不完整,请完善!~`;
            return;
          }
        if (toRaw(box.planDate) == "" ) {
          box.isErrRow = true;
            box.errRowData = `请输入交货日期!~`;
          return;
        }
        }
      }
      for (let index = 0; index < toRaw(box.SMRRows).length; index++) {
        if (
          toRaw(box.SMRRows)[index].goodsSize != "" ||
          toRaw(box.SMRRows)[index].purchaseOrderQuantity != ""
        ) {
          if (
            toRaw(box.SMRRows)[index].goodsSize == "" ||
            toRaw(box.SMRRows)[index].goodsStyle == "" ||
            toRaw(box.SMRRows)[index].purchaseOrderQuantity == ""
          ) {
            box.isErrRow = true;
            box.errRowData = `SMR木箱表的  第${
              index + 1
            }行  信息不完整,请完善!~`;
            return;
          }
        }
      }
      for (let index = 0; index < toRaw(box.trayRows).length; index++) {
        if (
          toRaw(box.trayRows)[index].goodsSize != "" ||
          toRaw(box.trayRows)[index].purchaseOrderQuantity != ""
        ) {
          if (
            toRaw(box.trayRows)[index].goodsSize == "" ||
            toRaw(box.trayRows)[index].goodsStyle == "" ||
            toRaw(box.trayRows)[index].purchaseOrderQuantity == ""
          ) {
            box.isErrRow = true;
            box.errRowData = `托盘表的  第${index + 1}行  信息不完整,请完善!~`;
            return;
          }
        }
      }
      // 第二步 将表头信息加入表身的每一行. new Date()
      const boxArr = toRaw(box.boxRows).filter((val, index) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["planDate"] = box.planDate;
        val["handleDate"] =formatDate(new Date(),'yyyy-MM-dd');
        val["handleNameID"] ="朱俊宇";
        return (
          val.goodsSize != "" &&
          val.goodsStyle != "" &&
          val.purchaseOrderQuantity != ""
        );
      });
      const SMRArr = toRaw(box.SMRRows).filter((val) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["planDate"] = box.planDate;
        return (
          val.goodsSize != "" &&
          val.goodsStyle != "" &&
          val.purchaseOrderQuantity != ""
        );
      });
      const trayArr = toRaw(box.trayRows).filter((val) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["planDate"] = box.planDate;
        return (
          val.goodsSize != "" &&
          val.goodsStyle != "" &&
          val.purchaseOrderQuantity != ""
        );
      });
      let insertData=JSON.stringify(boxArr.concat(SMRArr,trayArr))
      console.log(insertData);
      dd(insertData);
      async function dd(aa) {
        console.log(aa);
        var res = await insertPurchaseOrder(aa);
        console.log(res.data);
        box.isErrRow = true;
        box.errRowData = `恭喜!~  成功增加${res.data}条记录~`;
      }
    }

    // 内销外销是否正确
    function yesExportIsNorm() {
      if (box.yesExport != "内销" && box.yesExport != "外销") {
        box.isErrRow = true;
        box.errRowData = `只能输入‘内销’或者‘外销’不能输入其他内容！`;
        box.yesExport = "";
      }
    }
    // 智能即时库存
    function nowStock(rowData) {
      console.log("智能即时库存", rowData);
      //第一步  看看是否开启了 智能提示  isPrompts
      //第二步  获取产品分类 (box SMR tray )#C2185B
      if (box.isPrompts) {
        if (rowData.goodsName == "普通木箱") {
          box.isHeader = true;
          box.cards_data = cards_data;
          box.cardBackground = { "background-color": "#C2185B" };
        }

        if (rowData.goodsName == "SMR木箱") {
          box.isHeader = true;
          box.cardBackground = { "background-color": "#00796B" };
        }
        if (rowData.goodsName == "托盘") {
          box.isHeader = true;
          box.cardBackground = { "background-color": "#F57C00" };
        }
      }
    }
    // 格式是否错误
    function boxGoodsSizeIsNorm(r) {
      // console.log("当前输入行的id__", toRaw(r).id);
      var re = new RegExp(
        "^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$"
      );
      if (!re.test(toRaw(r).goodsSize)) {
        box.boxDialog = !box.boxDialog;
        box.boxRows[toRaw(r).id - 1].goodsSize = "";
        return;
      } else {
        // 调用智能检查函数,显示当前库存信息
        nowStock(toRaw(r));
      }
      if (box.boxRows[box.boxRows.length - 1].goodsSize != "") {
        boxAddRows();
      }
    }
    function SMRGoodsSizeIsNorm(r) {
      var re = new RegExp(
        "^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$"
      );
      if (!re.test(toRaw(r).goodsSize)) {
        box.boxDialog = !box.boxDialog;
        box.SMRRows[toRaw(r).id - 1].goodsSize = "";
        return;
      } else {
        // 调用智能检查函数
        nowStock(toRaw(r));
      }
      if (box.SMRRows[box.SMRRows.length - 1].goodsSize != "") {
        SMRAddRows();
      }
    }
    function trayGoodsSizeIsNorm(r) {
      var re = new RegExp("^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$");
      if (!re.test(toRaw(r).goodsSize)) {
        box.boxDialog = !box.boxDialog;
        box.trayRows[toRaw(r).id - 1].goodsSize = "";
        return;
      } else {
        // 调用智能检查函数
        nowStock(toRaw(r));
      }
      if (box.trayRows[box.trayRows.length - 1].goodsSize != "") {
        trayAddRows();
      }
    }
    // 增加一行
    function boxAddRows() {
      var map = {
        id: 0,
        goodsName: "普通木箱",
        goodsSize: "",
        goodsStyle: "",
        purchaseOrderQuantity: "",
        forProductName: "",
        customerMark: "",
      };
      map.id = box.boxRows[box.boxRows.length - 1].id + 1;
      // map.id = box.boxRows.length + 1;
      box.boxRows.push(map);
    }
    function SMRAddRows() {
      var map = {
        id: 0,
        goodsName: "SMR木箱",
        goodsSize: "",
        goodsStyle: "",
        purchaseOrderQuantity: "",
        forProductName: "",
        customerMark: "",
      };
      map.id = box.SMRRows.length + 1;
      box.SMRRows.push(map);
    }
    function trayAddRows() {
      var map = {
        id: 0,
        goodsName: "托盘",
        goodsSize: "",
        goodsStyle: "",
        purchaseOrderQuantity: "",
        forProductName: "通用",
        customerMark: "",
      };
      map.id = box.trayRows.length + 1;
      box.trayRows.push(map);
    }

    // 删除一行
    function boxRowDelete(row) {
      if (box.boxRows.length > 1) {
        box.boxRows.splice(toRaw(row).id - 1, 1);
        box.boxRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }
    function SMRRowDelete(row) {
      if (box.SMRRows.length > 1) {
        box.SMRRows.splice(toRaw(row).id - 1, 1);
        box.SMRRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }
    function trayRowDelete(row) {
      if (box.trayRows.length > 1) {
        box.trayRows.splice(toRaw(row).id - 1, 1);
        box.trayRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }

    return {
      box,
      columnsInsert,
      boxAddRows,
      SMRAddRows,
      trayAddRows,
      boxCustomize,
      SMRCustomize,
      trayCustomize,
      Mycolor: ["red", "green", "purple", "orange", "primary", "teal", "white"],
      boxRowDelete,
      SMRRowDelete,
      trayRowDelete,
      yesExportIsNorm,
      boxGoodsSizeIsNorm,
      SMRGoodsSizeIsNorm,
      trayGoodsSizeIsNorm,
      UIinsertPurchaseOrder,
      isSureBut,
    };
  },
};

const boxCustomize = ref([
  {
    label: "普通木箱",
    children: [
      {
        label: "",
        header: "generic",
      },
    ],
  },
]);
let SMRCustomize = ref([
  {
    label: "SMR木箱",
    children: [
      {
        label: "",
        header: "generic",
      },
    ],
  },
]);
let trayCustomize = ref([
  {
    label: "托盘",
    children: [
      {
        label: "",
        header: "generic",
      },
    ],
  },
]);
const box = reactive({
  isDisable:false,   //是否可以编辑
  isSure:false,   //审核
  isHeader: false, //智能提示卡片
  isPrompts: false, //开启智能提示
  boxDialog: false,
  isDialog: false, //输入错误消息框
  isErrRow: false, //输入不完整消息框
  errRowData: null, //输入不完整消息框内容
  boxIsShow: true,
  SMRIsShow: true,
  trayIsShow: true,
  yesExport: "内销",
  planDate: "",
  goods: "",
  goodsSize: null,
  goodsStyle: "分块叠高",
  purchaseOrderQuantity: null,

  customerPurchaseOrderId: "domesticPurchaseOrderId01",
  purchaseOrderId: "purchaseOrderId001",
  forProductName: "forProductName01",
  customerMark: "customerMark01",
  supplierName: "supplierName001",
  SMROptions: ["SMRY-2","SMRY-3","SMRY-4","SMRY-5","SMRY-6","SMRY-7","SMRY-8","SMRY-9","SMRY-10","SMRY-12",
    "SMR-30","SMR-35","SMR-40","SMR-45","SMR-50","SMR-60","SMR-70","SMR-80","SMR-100","SMR-125","SMR-203",
    "SMR-B","SMR-C","SMR-D","SMR-E","SMR-F","SMR-G","SMR-H","SMR-J"],
  boxOptions: ["分块叠高", "整条叠高", "实木"],
  trayOptions: ["有盖板", "无盖板"],
  MaterialOptions:["默认", "松木"],
  cards_data: [],
  cardBackground: { "background-color": "#292845;" },
  purchaseOrderIdList: [],
  // SMRRowNumber:0,
  // trayRowNumber:0,
  boxRows: [
    {
      id: 1,
      goodsName: "普通木箱",
      goodsMaterial:"默认",
      goodsSize: "100*100*100",
      goodsStyle: "分块叠高",
      purchaseOrderQuantity: "6",
      forProductName: "aa",
      customerMark: "aa",
    },
    {
      id: 2,
      goodsName: "普通木箱",
      goodsMaterial:"默认",
      goodsSize: "200*200*200",
      goodsStyle: "整条叠高",
      purchaseOrderQuantity: "2",
      forProductName: "bb",
      customerMark: "",
    },
    {
      id: 3,
      goodsName: "普通木箱",
      goodsMaterial:"默认",
      goodsSize: "300*300*300",
      goodsStyle: "整条叠高",
      purchaseOrderQuantity: "9",
      forProductName: "",
      customerMark: "",
    },
  ],
  SMRRows: [
    {
      id: 1,
      goodsName: "SMR木箱",
        goodsMaterial:"默认",
      goodsSize: "100*100*100",
      goodsStyle: "SMR-45",
      purchaseOrderQuantity: "4",
      forProductName: "aa",
      customerMark: "aa",
    },
    {
      id: 2,
      goodsName: "SMR木箱",
        goodsMaterial:"默认",
      goodsSize: "200*200*200",
      goodsStyle: "SMR-50",
      purchaseOrderQuantity: "5",
      forProductName: "bb",
      customerMark: "",
    },
    {
      id: 3,
      goodsName: "SMR木箱",
        goodsMaterial:"默认",
      goodsSize: "300*300*300",
      goodsStyle: "SMR-D",
      purchaseOrderQuantity: "6",
      forProductName: "",
      customerMark: "",
    },
  ],
  trayRows: [
    {
      id: 1,
      goodsName: "托盘",
      goodsSize: "66*66",
        goodsMaterial:"默认",
      goodsStyle: "有",
      purchaseOrderQuantity: "7",
      forProductName: "通用",
      customerMark: "",
    },
    {
      id: 2,
      goodsName: "托盘",
        goodsMaterial:"默认",
      goodsSize: "77*77",
      goodsStyle: "无",
      purchaseOrderQuantity: "8",
      forProductName: "通用",
      customerMark: "",
    },
    {
      id: 3,
      goodsName: "托盘",
        goodsMaterial:"默认",
      goodsSize: "88*88",
      goodsStyle: "无",
      purchaseOrderQuantity: "9",
      forProductName: "通用",
      customerMark: "",
    },
  ],
});
</script>
<style>
.tree_font {
  font: 15px sans-serif;
}
.table_width {
  width: 96%;
}
.title_font {
  color: rgb(17, 17, 19);
  font-size: 14px;
  font-weight: bolder;
}
.but_float {
  margin-right: 2%;
  float: right;
}
.card_a {
  background-color: rgb(236, 236, 243);
  height: 80px;
}
.title_font2 {
  font-size: 18px;
  font-weight: bolder;
}
.bar_width {
  width: 80%;
}
.my-card {
  width: 80%;
  height: 145px;
}
</style>
